import { useEffect, useRef,useState } from 'react'
import "./index.scss"
import {  useDispatch, useSelector } from 'react-redux'
import { componentsData } from '../../store/data'
import { addTiem } from '../../store'
import { PictureOutlined,CodepenOutlined,CarOutlined,GlobalOutlined,QrcodeOutlined,DropboxOutlined,UnorderedListOutlined
  ,AreaChartOutlined,BookOutlined,SkinOutlined,TranslationOutlined,UserOutlined
 } from '@ant-design/icons';
import { Button } from "antd";
import Tindex from "../../components/editor_page/index"
import You from "../editor_page/You"
import { isShowMenu } from '../../store'
import TabRight from '../editor_page/Tab-Right/TabRight'

function Index() {
  //Tab切换
  type Tab = 'tab1' | 'tab2' | 'tab3' | 'tab4' | 'tab5' | 'tab6' | 'tab7' | 'tab8';
  const [activeTab, setActiveTab] = useState<Tab>('tab1');

  const handleTabClick = (tab: Tab) => {
    setActiveTab(tab);
  };
    //获取仓库数据
    const a = useSelector((state:any) => state.student.componentList);
    useEffect(() => {
      const box1 = document.querySelectorAll(".editItem");
      if(box1){
        box1.forEach((v:any,i:any) => {
          if(i === box1.length - 1){
            v.childNodes.forEach((e:any) => {
              if(e.className === 'las' || e.classList[0] === 'la'){
                e.style.display = 'block'
              }
            })
          }else{
            v.childNodes.forEach((e:any) => {
              if(e.className === 'las' || e.classList[0] === 'la'){
                e.style.display = 'none'
              }
            })
          }
        })
      }
    },[a.length])
    //右击
    const menuInfo = useSelector((state:any) => state.student.menuInfo);
    const dispath = useDispatch()
    // console.log(a)
    const box:any = useRef(null);
    const onDragStart = (e:any) => {
        e.dataTransfer.setData('index',e.target.dataset.index);
        console.log(e);
    }
    const onDrop = (e:any) => {
        const a = box.current.getBoundingClientRect();
        const l = e.clientX - a.left;
        const t = e.clientY - a.top;
        const index = e.dataTransfer.getData('index');
        const b = JSON.parse(JSON.stringify(componentsData[index]))
        b.style = {...b.style,left:l,top:t}
        // console.log(l,t)
        dispath(addTiem(b))
    }
    // const lis = ["文字","图片"]
  const onDragOver = (e:any) => {
    e.preventDefault();
  }
  //右击
  const showMenu = (e:any) => {
    e.preventDefault();
    const a = (
      document.querySelector('.center') as any
    ).getBoundingClientRect();
    const { left,top } = a;
    const { clientX,clientY} = e;
    const l = clientX - left;
    const t = clientY - top;
    dispath(isShowMenu({showMenu:true,menuLeft:l,menuTop:t}));
    const mousemove = (e:any) => {
      const le = e.clientX - left;
      const to = e.clientY - top;
      const b:any = document.querySelector(".youji");
      if(
        l - le >= 30 ||
        t - to >= 30 ||
        to - t >= 30 + b.clientHeight ||
        le - l >= 30 + b.clientWidth
      ){
        dispath(isShowMenu({showMenu:false,menuLeft:1,menuTop:t}))
        document.querySelector(".center")?.removeEventListener("mousemove",mousemove)
      }
    };
    document.querySelector('.center')?.addEventListener("mousemove",mousemove)
  }

  const delClick = () => {
    window.location.href = "/home"
  }
  return (
    <div>
       <div className="header">
        <div className="logo_left">
        <img src="/src/img/H5_logo.png" alt="" className='logo'/>
        </div>
        <div className="img_left">
          <img src="/src/img/vip.svg" alt="" />
          <p>开通会员</p>
        </div>
        <div className="quan_page">
          <p><span>3</span>个版权风险</p>
        </div>
        <div className="tab_page">
         <div className="icon_page">
          <PictureOutlined style={{fontSize:"30px"}}/>
          <p>文本</p>
          
         </div>
         <div className="icon_page">
          <CodepenOutlined style={{fontSize:"30px"}}/>
          <p>图片</p>
          
         </div>
         <div className="icon_page">
          <CarOutlined style={{fontSize:"30px"}}/>
          <p>音乐</p>
          
         </div>
         <div className="icon_page">
          <GlobalOutlined style={{fontSize:"30px"}}/>
          <p>视频</p>
          
         </div>
          <div className="icon_page">
          <QrcodeOutlined style={{fontSize:"30px"}}/>
          <p>组件</p>
          
         </div>
          <div className="icon_page">
          <DropboxOutlined style={{fontSize:"30px"}}/>
          <p>营销</p>
          
         </div>
        </div>
        <div className="right_page">
          <UnorderedListOutlined />
          <p>更多</p>
          <Button>预览和设置</Button>
          <Button>保存</Button>
          <Button type="primary">发布</Button>
          <Button onClick={delClick}>退出</Button>
        </div>
    </div>
   <div className="box">
      <div className="left">
        <div className="tab_left">
          <div className="qie_page">
            <div  className={activeTab === 'tab1' ? 'active' : ''}
          onClick={() => handleTabClick('tab1')}>
            <p style={{textAlign:"center"}}><AreaChartOutlined style={{fontSize:"40px"}}/></p>
            <p style={{textAlign:"center"}}>图文</p>
            </div>
            
          </div>
           <div className="qie_page">
            <div className={activeTab === 'tab2' ? 'active' : ''}
          onClick={() => handleTabClick('tab2')}>
              <p style={{textAlign:"center"}}><BookOutlined  style={{fontSize:"40px"}}/></p>
              <p style={{textAlign:"center"}}>单页</p>
            </div>
            
          </div>
           <div className="qie_page">
            <div className={activeTab === 'tab3' ? 'active' : ''}
          onClick={() => handleTabClick('tab3')}>
             <p style={{textAlign:"center"}}><SkinOutlined style={{fontSize:"40px"}}/></p>
            <p style={{textAlign:"center"}}>装饰</p>
            </div>
           
          </div>
           <div className="qie_page">
            <div className={activeTab === 'tab4' ? 'active' : ''}
          onClick={() => handleTabClick('tab4')}>
               <p style={{textAlign:"center"}}><TranslationOutlined  style={{fontSize:"40px"}}/></p>
            <p style={{textAlign:"center"}}>艺术字</p>
            </div>
           
          </div>
           <div className="qie_page">
            <div className={activeTab === 'tab5' ? 'active' : ''}
          onClick={() => handleTabClick('tab5')}>
              <p style={{textAlign:"center"}}><UserOutlined  style={{fontSize:"40px"}}/></p>
            <p style={{textAlign:"center"}}>我的</p>
            </div>
            
          </div>
        </div>
        {activeTab === 'tab1' && 
        <div className='ul_page'>
           <ul>
          {componentsData &&
            componentsData.map((e: any, index: number) => {
              return (
                <li
                  key={index}
                  draggable
                  onDragStart={onDragStart}
                  data-index={index}
                >
                  {e.label}
                </li>
              );
            })}
        </ul>
        </div>
        }
        {activeTab === 'tab2' && 
        <div className='ul_page'>
          <p>Tab 2 content</p>
        </div>
        }
         {activeTab === 'tab3' && 
        <div className='ul_page'>
          <p>Tab 3 content</p>
        </div>
        }
         {activeTab === 'tab4' && 
        <div className='ul_page'>
          <p>Tab 4 content</p>
        </div>
        }
         {activeTab === 'tab5' && 
        <div className='ul_page'>
          <p>Tab 5 content</p>
        </div>
        }
      </div>
      <div
        className="center"
        onDragOver={onDragOver}
        ref={box}
        onDrop={onDrop}
        onContextMenu={showMenu}
      >
        {a.length > 0 && a.map((e:any,index:number) => {
          return (
            <Tindex item={e} id={index} key={index}/>
          )
        })}
        {menuInfo.showMenu && <You />}
      </div>
      <div className="right">
       <TabRight />
       
      </div>
    </div>
    </div>
  );
}

export default Index
